<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">窜货查询</p>
    </div>
    <div class="view-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="产品名称" prop="productBasicName">
            <el-input
                v-model="queryParams.productBasicName"
                placeholder="请输入产品名称"
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="客户名称" prop="dealerName">
            <el-input
                v-model="queryParams.dealerName"
                placeholder="请输入客户名称"
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="激活位置" prop="scanAddress">
            <el-input
                v-model="queryParams.scanAddress"
                placeholder="请输入激活位置"
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="销售位置" prop="dealerAddress">
            <el-input
                v-model="queryParams.dealerAddress"
                placeholder="请输入销售位置"
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="处理状态" prop="processing" >
          <el-select
            v-model="queryParams.processing"
            clearable
            size="small"
            style="width:100px;"
          >
            <el-option
              v-for="item in resultList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" @row-click="handleView" border>
        <el-table-column label="序号" type="index" align="center" width="50">
            <template slot-scope="scope">
                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
            </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="productBasicName" />
        <el-table-column label="销售位置" align="center" prop="dealerAddress" :show-overflow-tooltip="true" />
        <el-table-column label="激活位置" align="center" prop="scanAddress" />
        <el-table-column label="销售日期" align="center" prop="outTime" width="170" />
        <el-table-column label="激活时间" align="center" prop="createTime" width="170" />
        <el-table-column label="客户名称" align="center" prop="dealerName" />
        <el-table-column label="客户联系电话" align="center" prop="phone" />
        <el-table-column label="处理状态" align="center" prop="processing">
          <template slot-scope="scope">
            <div v-if="scope.row.processing == '1'" style="color:#52C41A">已处理</div>
            <div v-if="scope.row.processing == '0'" style="color:#13C2C2">未处理</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      />
    </div>
    <!-- 弹出数据 -->
    <el-dialog title="违规处理" :visible.sync="open" width="700px" top="50px" append-to-body center :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称:">{{ form.dealerName ? form.dealerName : '暂无' }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户联系电话:">{{ form.phone ? form.phone : '暂无' }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理原因:">窜货预警</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <template v-if="form.processing && form.processing == '0'">
              <el-form-item label="处理内容:" prop="handlingComments">
                <el-input v-model="form.handlingComments" type="textarea" placeholder="请输入处理内容"></el-input>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item label="处理内容:">{{ form.handlingComments }}</el-form-item>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <template v-if="form.processing && form.processing == '0'">
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" class="btn-success mr20 width100" @click="submitForm">确 定</el-button>
          <el-button class="width100" @click="cancel">取 消</el-button>
        </div>
      </template>
      <template v-else>
        <div slot="footer" class="dialog-footer">
          <el-button class="width100" @click="cancel">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { goodsList, goodsUpdate } from "@/api/system/anti/anti"
export default {
  name: "list",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 列表数据
      list: [],
      // 处理结果
      resultList:[
        {
          value:'1',
          label:'已处理'
        },
        {
          value:'0',
          label:'未处理'
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productBasicName: undefined, // 产品名称
        dealerName: undefined, // 客户名称
        scanAddress: undefined, // 激活位置
        dealerAddress: undefined, // 销售位置
        processing: undefined, // 处理结果
      },
      open: false,
      form: {},
      // 表单校验
      rules: {
        handlingComments: [
          { required: true, message: "处理内容不能为空", trigger: "blur" }
        ]
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
        this.loading = true
        goodsList(this.addDateRange(this.queryParams)).then(res => {
            this.list = res.rows
            this.total = res.total
            this.loading = false
        })
    },
    // 搜索按钮
    handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    // 重置按钮
    resetQuery() {
        this.resetForm("queryForm")
        this.handleQuery()
    },
    // 查看
    handleView(row) {
      this.open = true
      this.form.id = row.id
      this.form.dealerName = row.dealerName
      this.form.phone = row.phone
      this.form.processing = row.processing
      if(row.processing == '1'){
        this.form.handlingComments = row.handlingComments
      }
    },
    reset() {
      this.form = {
        id: undefined,
        dealerName: undefined,
        phone: undefined,
        nickName: undefined,
        password: undefined,
        processing: undefined,
        handlingComments: undefined
      }
      this.resetForm("form")
    },
    // 关闭弹窗
    handleClose(){
      this.open = false
      this.reset()
    },
    // 取消
    cancel() {
      this.open = false
      this.reset()
    },
    // 确定
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let obj = {
            id: this.form.id,
            handlingComments: this.form.handlingComments
          }
          goodsUpdate(obj).then(res => {
            if(res.code == 200){
              this.open = false
              this.$modal.msgSuccess("操作成功")
              this.getList()
            }
          })
        }
      })
    }
  }
}
</script>